<template>
	<view class="content">
		<!-- 解绑信息列表 -->
		<view class="untie_list">
			<view class="untie_item">
				<text>解绑</text>
				<text>{{name}} </text>
			</view>
			
			<view class="untie_item">
				<text>解绑设备</text>
				 <picker @change="bindPickerChange" :value="index" :range="array">
				           <view class="uni-input">{{array[index]}}</view>
				  </picker>
				<!-- <text style="color: #C1C1C2; font-size: 28rpx;">选择需要解绑的设备  </text> -->
				<image :src="imgUrl+'/static/wap/img/down@2x.png'"></image>
			</view>
			
			<view class="untie_item">
				<text>设备编码 </text>
				<text>{{code}}  </text>
			</view>
			
			<view class="untie_item">
				<text>解绑原因</text>
				<textarea class="textarea" placeholder="在这里输入内容字数不超过200字" maxlength="200" name="" id="" cols="30" rows="10" v-model="content">
					
				</textarea>
			</view>
		</view>
		
		<view class="untie_sub" @click="unbundling">
			<text>提 交</text>
		</view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				 array: ['电表', '水表'],
				 index:0,
				 code:'',
				 name:'',
				 content:'',
			};
		},
		onLoad(){
			console.log("123124")
			const userInfo = uni.getStorageSync('userInfo');
			this.name=userInfo.truename;
			this.getCodeByType(0)
		},
		methods:{
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
					this.getCodeByType(this.index)
		    },
			getCodeByType(code){
				var that=this;
				code=code+1
				that.ajax({
					url:'api/electric/getCodeByType',
					data:{
						type:code,
					},
					success:function(res){
						that.code=res.data
					}
				  })
			},
			unbundling(){
				var that=this;
				var type=this.index+1;
				that.ajax({
					url:'api/electric/unbundling',
					data:{
						code:that.code,
						type:type,
						content:that.content
					},
					success:function(res){
						if(res.code==200){
							
							
							setTimeout(() => {
								uni.showToast({
									title:"修改成功",
									icon:'none',
									duration:1500,
									success() {
										uni.switchTab({
											url:'../index/index'
										})
									}
								});

							}, 10)
						}else{
							setTimeout(function(){
								uni.showToast({
										title:"" + res.msg,
										icon:'none',
										duration:2500
								});
							},10)

						}
					}
				  })
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding: 0 30rpx;
		color: #383838;
		font-size: 30rpx;
	}
	.untie_list{
		.untie_item{
			display: flex;
			justify-content: space-between;
			// height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid #F3F3F5;
		}
		& .untie_item:nth-child(2){  
			position: relative;
			padding-right: 64rpx;
			image{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 32rpx;
				height: 32rpx;
			}
		}
		& :last-child{
			flex-direction: column;
			.textarea{
				padding: 25rpx;
				width: 640rpx;
				color: #C1C1C2;
				border-radius: 15rpx;
				background-color: #F3F3F5;
			}
		}
	}

	.untie_sub{
		margin-top: 160rpx;
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background-color: #2AABAD;
		border-radius: 45rpx;
	}
</style>
